<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>退款申请API测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #1890ff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #40a9ff;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid #1890ff;
        }
        .error {
            border-left-color: #dc3545;
            background-color: #f8d7da;
        }
        .success {
            border-left-color: #28a745;
            background-color: #d4edda;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        .status-processed {
            background-color: #d4edda;
            color: #155724;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        .status-rejected {
            background-color: #f8d7da;
            color: #721c24;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>退款申请API测试</h1>
        
        <div class="form-group">
            <label for="patientInfo">患者姓名或手机号：</label>
            <input type="text" id="patientInfo" placeholder="请输入患者姓名或手机号">
        </div>
        
        <div class="form-group">
            <label for="applyStartTime">申请开始时间：</label>
            <input type="datetime-local" id="applyStartTime">
        </div>
        
        <div class="form-group">
            <label for="applyEndTime">申请结束时间：</label>
            <input type="datetime-local" id="applyEndTime">
        </div>
        
        <div class="form-group">
            <label for="status">状态：</label>
            <select id="status">
                <option value="">全部</option>
                <option value="0">待处理</option>
                <option value="1">已处理</option>
                <option value="2">已拒绝</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="pageIndex">页码：</label>
            <input type="number" id="pageIndex" value="1" min="1">
        </div>
        
        <div class="form-group">
            <label for="pageSize">每页大小：</label>
            <input type="number" id="pageSize" value="10" min="1" max="100">
        </div>
        
        <button onclick="testAPI()">测试API</button>
        <button onclick="clearResult()">清除结果</button>
        
        <div id="result" class="result" style="display: none;"></div>
    </div>

    <script>
        async function testAPI() {
            const resultDiv = document.getElementById('result');
            resultDiv.style.display = 'block';
            resultDiv.className = 'result';
            resultDiv.innerHTML = '正在请求数据...';
            
            try {
                const params = new URLSearchParams();
                
                const patientInfo = document.getElementById('patientInfo').value;
                if (patientInfo) params.append('PatientInfo', patientInfo);
                
                const applyStartTime = document.getElementById('applyStartTime').value;
                if (applyStartTime) params.append('ApplyStartTime', applyStartTime);
                
                const applyEndTime = document.getElementById('applyEndTime').value;
                if (applyEndTime) params.append('ApplyEndTime', applyEndTime);
                
                const status = document.getElementById('status').value;
                if (status) params.append('Status', status);
                
                const pageIndex = document.getElementById('pageIndex').value;
                params.append('PageIndex', pageIndex);
                
                const pageSize = document.getElementById('pageSize').value;
                params.append('PageSize', pageSize);
                
                const url = `http://localhost:5242/api/RefundApplication/list?${params.toString()}`;
                
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    displayData(data);
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `<strong>请求失败：</strong>${data.msg}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `<strong>请求错误：</strong>${error.message}`;
            }
        }
        
        function displayData(data) {
            const resultDiv = document.getElementById('result');
            const responseData = data.data;
            
            let html = `
                <h3>请求成功</h3>
                <p><strong>总记录数：</strong>${responseData.totalCount}</p>
                <p><strong>总页数：</strong>${responseData.totalPages}</p>
                <p><strong>当前页：</strong>${responseData.currentPage}</p>
                <p><strong>每页大小：</strong>${responseData.pageSize}</p>
            `;
            
            if (responseData.items && responseData.items.length > 0) {
                html += `
                    <table>
                        <thead>
                            <tr>
                                <th>申请编号</th>
                                <th>申请时间</th>
                                <th>用户手机号</th>
                                <th>退款金额</th>
                                <th>来源</th>
                                <th>状态</th>
                                <th>处理时间</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                responseData.items.forEach(item => {
                    const statusClass = getStatusClass(item.status);
                    const processTime = item.processTime ? new Date(item.processTime).toLocaleString('zh-CN') : '-';
                    const applyTime = item.applyTime ? new Date(item.applyTime).toLocaleString('zh-CN') : '-';
                    
                    html += `
                        <tr>
                            <td>${item.applicationNo || '-'}</td>
                            <td>${applyTime}</td>
                            <td>${item.userPhone || '-'}</td>
                            <td>¥${item.amount || 0}</td>
                            <td>${item.source || '-'}</td>
                            <td><span class="${statusClass}">${item.statusText || '未知'}</span></td>
                            <td>${processTime}</td>
                        </tr>
                    `;
                });
                
                html += '</tbody></table>';
            } else {
                html += '<p>暂无数据</p>';
            }
            
            resultDiv.innerHTML = html;
        }
        
        function getStatusClass(status) {
            switch (status) {
                case 0: return 'status-pending';
                case 1: return 'status-processed';
                case 2: return 'status-rejected';
                default: return 'status-pending';
            }
        }
        
        function clearResult() {
            const resultDiv = document.getElementById('result');
            resultDiv.style.display = 'none';
        }
    </script>
</body>
</html> 